<template>
	<view class="content">
		<view class="tab">
			<view class="item" v-for="(item, index) in tabList" :key="index" @click="onTab(item)">
				<view :class="tabId == item.id ? 'title-on' : 'title'">{{ item.text }}</view>
			</view>
		</view>
		<view class="tab-content">
			<view class="box1" v-if="tabId == 1">
				<view class="list">
					<view class="item" v-for="(item, index) in dataList" :key="index">
						<image class="bgimg" src="http://sni1muz85.hd-bkt.clouddn.com/img/my/card_bg.png"></image>
						<view class="card">
							<view class="left">
								<view class="text">
									<view class="y">￥</view>
									<view class="money">{{ item.money }}</view>
								</view>
								<text class="text2">现金</text>
								<view class="a"></view>
							</view>
							<view class="right">
								<view class="title">{{ item.name }}</view>
								<view class="line">
									<view class="time">领取日期：{{ item.receiveTime }}</view>
									<!--									<view class="type" v-if="item.type == 1">使用中</view>-->
									<view class="num">剩{{ item.residue }}张</view>
								</view>
								<view class="line2">
									<view class="detail" @click="goCardDetail(item)">
										<text>规则</text>
										<image src="http://sni1muz85.hd-bkt.clouddn.com/img/icons/detail.png"></image>
									</view>
									<!--									<view class="number" v-if="item.type == 1">剩余数量：{{ item.number }}</view>-->
									<view class="btnrow">
										<view class="btn btn1" @click="sendUser(item)">送给好友</view>
										<view class="btn btn2" v-if="item.source ===1" @click="goIndex(item)">去使用</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="box2" v-if="tabId == 2">
				<view class="list">
					<view class="item" v-for="(item, index) in sendLog" :key="index">
						<image class="bgimg" src="http://sni1muz85.hd-bkt.clouddn.com/img/my/card_bg.png"></image>
						<view class="card">
							<view class="left">
								<view class="text">
									<view class="y">￥</view>
									<view class="money">{{ item.money }}</view>
								</view>
								<text class="text2">现金</text>
								<view class="a"></view>
							</view>
							<view class="right">
								<view class="title">{{ item.name }}</view>
								<view class="line">
									<view class="time" v-if="item.state === 0">待领取</view>
									<view class="type" v-if="item.state === 1">已领取</view>
									<view class="type" v-if="item.state === 2">已退回</view>
									<view class="time" v-if="item.state === 1">
										领取日期：{{ dayjs(item.receiveTime).format('YYYY-MM-DD') }}</view>
									<!-- <view class="num" v-else>已赠送</view> -->
								</view>
								<view class="line2">
									<view class="detail" @click="goCardDetail(item)">
										<text>规则</text>
										<image src="http://sni1muz85.hd-bkt.clouddn.com/img/icons/detail.png"></image>
									</view>
									<view class="number">赠送数量：{{ item.number }}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="box3" v-if="tabId == 3">
				<view class="list">
					<view class="item" v-for="(item, index) in useLog" :key="index">
						<image class="bgimg" src="http://sni1muz85.hd-bkt.clouddn.com/img/my/card_bg.png"></image>
						<view class="card">
							<view class="left">
								<view class="text">
									<view class="y">￥</view>
									<view class="money">{{ item.money }}</view>
								</view>
								<text class="text2">现金</text>
								<view class="a"></view>
							</view>
							<view class="right">
								<view class="title">{{ item.name }}</view>
								<view class="line">
									<view class="time" :style="item.state === 1 ? 'color:#000' : ''">
										使用日期：{{ item.useTime ? dayjs(item.useTime).format('YYYY-MM-DD') : '' }}
									</view>
									<view class="type" v-if="item.state === 0">使用中</view>
									<view class="num" v-else>已使用</view>
								</view>
								<view class="line2">
									<view class="detail" @click="goCardDetail(item)">
										<text>规则</text>
										<image src="http://sni1muz85.hd-bkt.clouddn.com/img/icons/detail.png"></image>
									</view>
									<view class="number">数量：1</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="popup" v-if="isShowPopup">
			<view class="M"></view>
			<view class="box">
				<image class="close" src="http://sni1muz85.hd-bkt.clouddn.com/img/icons/close.png"
					@click="isShowPopup = false"></image>
				<view class="title">{{sendUserItem.name}}</view>
				<view class="card">
					<image src="http://sni1muz85.hd-bkt.clouddn.com/img/my/card.png"></image>
					<view class="textbox">
						<view class="text">签到卡赠送</view>
						<view class="money">
							<view class="y">￥</view>
							<view class="num">{{sendUserItem.money}}</view>
						</view>
						<text class="text2">现金</text>
					</view>
				</view>
				<view class="line1">
					<text>赠送数量</text>
					<text>拥有：{{sendUserItem.residue}}</text>
				</view>
				<view class="line2">
					<view class="add" @click="cut"> - </view>
					<input :value="giveNum" type="number">
					<view class="add" @click="add"> + </view>
				</view>
				<button open-type="share" class="btn">分享给好友</button>
			</view>
		</view>
	</view>
</template>

<script>
	import dayjs from 'dayjs'
	export default {
		onShareAppMessage() {
			let result;
			uni.showLoading({
				mask: true
			})
			this.$api.request({
				url: this.$api.sendCardToUser + "?cardGroupId=" + this.sendUserItem.id + "&number=" + this.giveNum
			}).then(res => {
				result = res
				uni.hideLoading();

			})

			const promise = new Promise(resolve => {
				setTimeout(() => {
					resolve({
						title: '送你签到卡请24小时内领取',
						path: '/pages/my/card/card?logId=' + result.data.id,
						imageUrl: "https://www.qifeiy.com/profile/upload/2023/10/01/tmp_7690ae8b61eb93ffcc5836cce3c31bd3_20231001223600A028.png"
					})
					this.isShowPopup = false

				}, 1000)
			})
			return {
				title: '自定义转发标题',
				path: '/page/user?id=123',
				promise
			}

		},
		data() {
			return {
				dayjs,
				adList: [],
				tabId: 1,
				tabList: [{
						id: 1,
						text: "签到卡"
					},
					{
						id: 2,
						text: "赠送记录"
					},
					{
						id: 3,
						text: "使用记录"
					},
				],
				sendLog: [],
				useLog: [],
				dataList: [

				],
				sendUserItem: {},
				isShowPopup: false,
				giveNum: 1, // 赠送数量
				activeGid: 0,
			}
		},
		onLoad(res) {
			this.params = res
			console.log(Number(res.logId));

			let that = this;
			if (res.logId) {
				let logId = Number(res.logId)
				let url = this.$api.getCard + "?logId=" + logId
				this.$api.request({
					url: url
				}).then(res => {
					that.initData()
				})
			}
			if (wx.createRewardedVideoAd) {
				this.videoAd = wx.createRewardedVideoAd({
					adUnitId: 'adunit-d86ae77ff227d1eb'
				})
				this.videoAd.onError((err) => {
					// 加载本地视频
					this.localAd = true
				})
				this.videoAd.onClose((res) => {
					if (res.isEnded) {
						this.$api.request({
							url: this.$api.adLog,
						})
						uni.setStorageSync("lastCardAdTime", Date.now())
						this.$api.request({
							url: this.$api.signUP,
							data: {
								cardGroupId: this.activeGid
							}
						}).then(res => {
							uni.navigateTo({
								url: "/myPage/check/check",
							})
						})
					}
				})
			}
		},
		onShow() {
			this.initData()

		},
		methods: {
			initData() {
				this.$api.request({
					url: this.$api.getSignGroup,
				}).then(res => {
					console.log(res)
					this.dataList = res.data
				})
				this.$api.request({
					url: this.$api.getSendCardLog,
				}).then(res => {
					console.log(res)
					this.sendLog = res.data
				})
				this.$api.request({
					url: this.$api.getCardUseLog,
				}).then(res => {
					console.log(res)
					this.useLog = res.data
				})
			},
			// 切换选项卡
			onTab(item) {
				this.tabId = item.id
			},
			add(item) {
				if (this.sendUserItem.residue <= this.giveNum) {
					return
				}
				this.giveNum = this.giveNum + 1
			},
			cut(item) {
				if (this.giveNum <= 1) {
					return
				}
				this.giveNum = this.giveNum - 1
			},

			sendUser(item) {
				console.log(item)
				this.sendUserItem = item

				this.isShowPopup = true
			},
			goIndex(result) {
				this.$api.request({
					url: this.$api.cardUseLog,
				}).then(res => {
					if (res.data.length > 0) {
						uni.showModal({
							title: '提示',
							content: '当前存在使用中签到卡',
							showCancel: false
						})
						return;
					} else {
						this.$api.request({
							url: this.$api.signIn,
						}).then(res => {
							let that = this
							const lastAdTime = uni.getStorageSync("lastCardAdTime")
							const showAd = (new Date(lastAdTime).toDateString() === new Date()
								.toDateString())
							if (showAd) {
								/** 已经展示过广告 */
								this.$api.request({
									url: this.$api.signUP,
									data: {
										cardGroupId: result.id
									}
								}).then(res => {
									uni.navigateTo({
										url: "/myPage/check/check",
									})
								})
							} else {
								uni.showModal({
									title: '提示',
									content: '看完视频可自动激活使用',
									success: function(res) {
										if (res.confirm) {
											/** 展示广告 */
											if (this.localAd) {
												// 本地视频 获取广告列表
												that.$api.request({
													url: that.$api.advertList,
												}).then(res => {
													let adList = res.data;
													let item = adList[Math.floor(Math
														.random() * adList
														.length)]
													uni.navigateTo({
														url: "/pages/index/ad?type=3&link=" +
															item.link +
															"&times=" +
															item.second +
															"&groupId=" +
															result.id,
													})
												})
											} else {
												that.activeGid = result.id
												that.videoAd.load()
												that.videoAd.show().catch(() => {
													// 获取广告列表
													that.$api.request({
														url: that
															.$api
															.advertList,
													}).then(res => {
														let adList =
															res
															.data;
														let item =
															adList[
																Math
																.floor(
																	Math
																	.random() *
																	adList
																	.length
																)
															]
														uni.navigateTo({
															url: "/pages/index/ad?type=3&link=" +
																item
																.link +
																"&times=" +
																item
																.second +
																"&groupId=" +
																result
																.id,
														})
													})
												})
											}
										}
									}
								});
							}
						})
					}
				})
			},
			// 跳转签到卡规则页
			goCardDetail(item) {
				let id;
				if (this.tabId === 1) {
					id = item.id;
				}
				if (this.tabId === 2) {
					id = item.cardGroupId;
				}
				if (this.tabId === 3) {
					id = item.cardGroupId;
				}
				uni.navigateTo({
					url: "/pages/my/card/cardDetail?id=" + id
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;

		.tab {
			display: flex;
			margin-top: 30rpx;

			.item {
				margin: 0 20rpx;
				font-size: 32rpx;
				// font-weight: bold;

				.title {
					color: #8A8A8A;
				}

				.title-on {
					color: #000;
					border-bottom: 5rpx solid #07C160;
				}
			}
		}

		.tab-content {
			.box1 {
				.list {
					width: 92%;

					.item {
						position: relative;
						margin-top: 30rpx;
						width: 92vw;

						.bgimg {
							width: 100%;
							height: 200rpx;
						}

						.card {
							width: 100%;
							height: 200rpx;
							position: absolute;
							top: 0;
							left: 0;
							border-radius: 15rpx;
							display: flex;
							align-items: center;

							// z-index: 10;
							.left {
								height: 200rpx;
								width: 240rpx;
								// background-image: url('http://sni1muz85.hd-bkt.clouddn.com/img/img/my/card_bg.png');
								display: flex;
								flex-direction: column;
								justify-content: center;
								align-items: center;
								position: relative;

								.text {
									color: #fff;
									display: flex;
									align-items: flex-end;

									.y {
										font-size: 28rpx;
										margin-bottom: 10rpx;
									}

									.money {
										font-size: 48rpx;
										font-weight: bold;
									}
								}

								.text2 {
									font-size: 28rpx;
									margin-top: 10rpx;
									color: #fff;
								}

								.a {
									height: 40rpx;
									width: 40rpx;
									background-color: #fff;
									border-radius: 50%;
									position: absolute;
									right: -15rpx;
								}
							}

							.right {
								flex: 1;
								height: 200rpx;
								margin-left: 20rpx;
								display: flex;
								flex-direction: column;

								.title {
									max-width: 400rpx;
									font-size: 38rpx;
									font-weight: bold;
									color: #333333;
									margin-top: 10rpx;
									text-overflow: ellipsis;
									overflow: hidden;
									word-break: break-all;
									white-space: nowrap;
								}

								.line {
									width: 400rpx;
									display: flex;
									justify-content: space-between;
									align-items: center;
									margin-top: 10rpx;
									font-size: 32rpx;

									.time {
										font-size: 24rpx;
										color: #8A8A8A;
									}

									.num {
										color: #8A8A8A;
									}

									.type {
										color: #E11260;
									}

								}

								.line2 {
									display: flex;
									justify-content: space-between;
									align-items: center;
									margin-top: 10rpx;

									.detail {
										display: flex;
										align-items: center;

										text {
											font-size: 28rpx;
										}

										image {
											height: 30rpx;
											width: 30rpx;
											// background-color: #E11260;
											border-radius: 50%;
											margin-left: 10rpx;
										}
									}

									.number {
										font-size: 32rpx;
									}

									.btnrow {
										display: flex;

										.btn {
											font-size: 28rpx;
											padding: 6rpx 20rpx;
											border: 1rpx solid #07C160;
											border-radius: 30rpx;
											margin-left: 10rpx;
										}

										.btn1 {
											color: #07C160;
										}

										.btn2 {
											color: #fff;
											background-color: #07C160;
										}
									}
								}
							}
						}
					}
				}
			}

			.box2 {
				.list {
					width: 92%;

					.item {
						position: relative;
						margin-top: 30rpx;

						.bgimg {
							width: 92vw;
							height: 200rpx;
						}

						.card {
							width: 92vw;
							height: 200rpx;
							position: absolute;
							top: 0;
							left: 0;
							border-radius: 15rpx;

							display: flex;
							align-items: center;

							// z-index: 10;
							.left {
								height: 200rpx;
								width: 240rpx;
								display: flex;
								flex-direction: column;
								justify-content: center;
								align-items: center;
								position: relative;

								.text {
									color: #fff;
									display: flex;
									align-items: flex-end;

									.y {
										font-size: 28rpx;
										margin-bottom: 10rpx;
									}

									.money {
										font-size: 48rpx;
										font-weight: bold;
									}
								}

								.text2 {
									font-size: 28rpx;
									margin-top: 10rpx;
									color: #fff;
								}

								.a {
									height: 40rpx;
									width: 40rpx;
									background-color: #fff;
									border-radius: 50%;
									position: absolute;
									right: -15rpx;
								}
							}

							.right {
								height: 200rpx;
								margin-left: 20rpx;
								display: flex;
								flex-direction: column;

								.title {
									max-width: 400rpx;
									font-size: 38rpx;
									font-weight: bold;
									color: #333333;
									margin-top: 10rpx;
									overflow: hidden;
									text-overflow: ellipsis;
									white-space: nowrap;
								}

								.line {
									width: 400rpx;
									display: flex;
									justify-content: space-between;
									align-items: center;
									margin-top: 10rpx;
									font-size: 32rpx;

									.time {
										font-size: 24rpx;
										color: #8A8A8A;
									}

									.num {
										color: #8A8A8A;
									}

									.type {
										color: #E11260;
									}

								}

								.line2 {
									display: flex;
									justify-content: space-between;
									align-items: center;
									margin-top: 30rpx;

									.detail {
										display: flex;
										align-items: center;

										text {
											font-size: 28rpx;
										}

										image {
											height: 30rpx;
											width: 30rpx;
											// background-color: #E11260;
											border-radius: 50%;
											margin-left: 10rpx;
										}
									}

									.number {
										font-size: 32rpx;
									}
								}
							}
						}
					}
				}
			}

			.box3 {
				.list {
					width: 92%;

					.item {
						position: relative;
						margin-top: 30rpx;
						width: 92vw;

						.bgimg {
							width: 100%;
							height: 200rpx;
						}

						.card {
							width: 100%;
							height: 200rpx;
							position: absolute;
							top: 0;
							left: 0;
							border-radius: 15rpx;

							display: flex;
							align-items: center;

							// z-index: 10;
							.left {
								height: 200rpx;
								width: 240rpx;
								display: flex;
								flex-direction: column;
								justify-content: center;
								align-items: center;
								position: relative;

								.text {
									color: #fff;
									display: flex;
									align-items: flex-end;

									.y {
										font-size: 28rpx;
										margin-bottom: 10rpx;
									}

									.money {
										font-size: 48rpx;
										font-weight: bold;
									}
								}

								.text2 {
									font-size: 28rpx;
									margin-top: 10rpx;
									color: #fff;
								}

								.a {
									height: 40rpx;
									width: 40rpx;
									background-color: #fff;
									border-radius: 50%;
									position: absolute;
									right: -15rpx;
								}
							}

							.right {
								height: 200rpx;
								margin-left: 20rpx;
								display: flex;
								flex-direction: column;
								justify-content: space-evenly;

								.title {
									max-width: 400rpx;
									font-size: 38rpx;
									font-weight: bold;
									color: #333333;
									margin-top: 10rpx;
									overflow: hidden;
									text-overflow: ellipsis;
									white-space: nowrap;
								}

								.line {
									width: 420rpx;
									display: flex;
									justify-content: space-between;
									align-items: center;
									margin-top: 10rpx;
									font-size: 32rpx;
									margin: 10rpx 0;

									.time {
										font-size: 24rpx;
										color: #8A8A8A;
									}

									.num {
										color: #8A8A8A;
									}

									.type {
										color: #E11260;
									}

								}

								.line2 {
									display: flex;
									justify-content: space-between;
									align-items: center;
									//margin-top: 30rpx;

									.detail {
										display: flex;
										align-items: center;

										text {
											font-size: 28rpx;
										}

										image {
											height: 30rpx;
											width: 30rpx;
											// background-color: #E11260;
											border-radius: 50%;
											margin-left: 10rpx;
										}
									}

									.number {
										font-size: 32rpx;
									}
								}
							}
						}
					}
				}
			}

		}

		.popup {
			height: 100%;
			width: 100%;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 10;

			.M {
				height: 100%;
				width: 100%;
				background-color: #000;
				opacity: 0.4;
			}

			.box {
				width: 80vw;
				position: absolute;
				top: 20%;
				left: 10vw;
				background-color: #fff;
				display: flex;
				flex-direction: column;
				align-items: center;
				border-radius: 15rpx;

				.close {
					height: 70rpx;
					width: 70rpx;
					border-radius: 50%;
					position: absolute;
					right: -35rpx;
					top: -35rpx;
				}

				.title {
					width: 90%;
					font-size: 32rpx;
					font-weight: bold;
					margin-top: 30rpx;
				}

				.card {
					width: 72vw;
					height: 300rpx;
					position: relative;
					margin-top: 40rpx;

					image {
						height: 100%;
						width: 100%;
					}

					.textbox {
						width: 72vw;
						height: 300rpx;
						position: absolute;
						top: 0;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						color: #fff;

						.text {
							font-size: 32rpx;
						}

						.money {
							display: flex;
							align-items: flex-end;
							margin-top: 20rpx;

							.y {
								font-size: 28rpx;
								margin-bottom: 5rpx;
							}

							.num {
								font-size: 48rpx;
								font-weight: bold;
							}
						}

						.text2 {
							font-size: 28rpx;
							margin-top: 10rpx;
							color: #fff;
						}
					}
				}

				.line1 {
					width: 400rpx;
					display: flex;
					justify-content: space-between;
					font-size: 32rpx;
					margin-top: 40rpx;
				}

				.line2 {
					width: 400rpx;
					display: flex;
					justify-content: space-between;
					font-size: 32rpx;
					border: 1rpx solid #ccc;
					margin-top: 20rpx;
					border-radius: 8rpx;

					.add {
						height: 100rpx;
						width: 100rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						background-color: #F5F7FA;
					}

					input {
						height: 100rpx;
						width: 200rpx;
						border: 0 1rpx solid #ccc;
						text-align: center;
					}
				}

				.btn {
					width: 300rpx;
					text-align: center;
					padding: 20rpx 0;
					border-radius: 50rpx;
					color: #fff;
					font-size: 32rpx;
					background-color: #07C160;
					margin: 50rpx 0;
				}
			}
		}
	}
</style>